<template>
	<div class="right">
		<div class="comment-text">评论回复</div>
		<li v-for="(comment, index) in comments" :key="index">
			<div><span class="del" @click="delItem(index)">删除</span></div>
			<div>
				<span>{{comment.name}}:</span>
			</div>
			<div class="comment-content">
				<span>{{comment.text}}</span>				
			</div>
		</li>
		<slot name="commentCount"></slot>
	</div>
</template>
<script type="text/javascript">
	export default {
		props: ['comments'],
		methods: {
			delItem: function(index) {
				this.comments.splice(index, 1);
			}
		}
	}
</script>
<style type="text/css">
	.right{
		height: 600px;
		width: 600px;
	}
	.right li{
		border: 1px solid #f4f4f4;
		list-style-type:none;
		height: 80px;
	}
	.right li .del{
		position: relative;
		left: 560px;
		top: 0px;
		color: red;
	}
	.right .comment-text{
		font-size: 20px;
	}
	.right .comment-content{
		padding-left: 60px;
	}
</style>
